<template>
  <div id="app-container">
    <!--<el-form :inline="true" class="demo-form-inline">
      <el-button type="primary" icon="el-icon-search" @click="initData">查询</el-button>
      <el-button type="default" @click="resetData">重置</el-button>
    </el-form>-->

    <!--数据显示列表-->
    <el-table fit highlight-current-row :data="dataList">
      <el-table-column type="index" label="序号" width="120"></el-table-column>.
      <el-table-column prop="berthCode" label="泊位编号" width="150" ></el-table-column>
      <el-table-column prop="berthName" label="泊位名称" width="150" ></el-table-column>
      <el-table-column prop="berthType" label="泊位类型" width="150" >
        <template slot-scope="scope">
          <span v-if="scope.row.berthType == 0">有车</span>
          <span v-if="scope.row.berthType == 1">无车</span>
          <span v-if="scope.row.berthType == 2">未激活</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
      <el-table-column label="操作" width="280">
        <template slot-scope="scope">
          <router-link to="/berth/add">
            <el-button type="primary" size="mini" icon="el-icon-search">新增</el-button>
          </router-link>
          <router-link :to="'/berth/edit/' + scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
  import berth from '../../api/berth'

  export default {
    // 表示定义数据模型
    data(){
      return {
        QueryBerthDTO: {},
        currentPage: 1,
        pageSize: 3,
        dataList: [],
        total: 10
      }
    },
    methods: {
      // 初始化查询数据
      initData(){
        berth.getList(this.currentPage, this.pageSize, this.QueryBerthDTO).then(res => {
          // res表示result res.data表示pageData res.data.data表示的分页的具体数据
          this.dataList = res.data.data;
          this.total = res.data.total;
        });
      },
      // 每页记录数发生变化
      handleSizeChange(size){
        this.pageSize = size;
        this.initData();
      },
      // 当前页发生变化
      handleCurrentChange(current){
        this.currentPage = current;
        this.initData();
      },
      // 清空搜索框内容
      resetData(){
        this.QueryBerthDTO = {};
        this.initData();
      },
      // 删除数据
      handleDelete(id){
        this.$confirm('是否确定删除数据？', '提示', {type: 'warning'}).then(() => {
          // 确定删除
          berth.delete(id).then(res => {
            this.$message.success(res.message);
            this.initData();
          });
        }).catch(() => {
          // 取消删除
          this.$message.info('取消删除操作');
        });
      }
    },
    created(){
      // 初始化页面数据
      this.initData();
      if(this.$route.params && this.$route.params.id){
        berth.getById(this.$route.params.id).then(res => {
          this.dataList = res.data;
        });
      }
    }
  }
</script>
